<template>
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" width="375" height="180">
    <van-swipe-item v-for="image in images" :key="image.id">
      <img v-lazy="image.imageUrl" :style="{width: '100%', height: '100%'}" />
    </van-swipe-item>
  </van-swipe>
  <!-- 商品卡片 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
>
    <van-card
    v-for="prod in list"
    :key="prod.id"
     :price="prod.price"
    :thumb="prod.image"
    :origin-price="prod.originPrice"
    @click="jumpToDetail(prod.id)"
  >
    <template v-slot:title>
      <div class="van-ellipsis">{{prod.title}}</div>
    </template>
    <template #desc>
      <div class="ranking-tag">{{prod.rankingTag}}</div>
    </template>
    <template #tags>
      <div class="daily-ranking">全天热卖 NO.{{prod.dataoke.dailyRanking}}</div>
  </template>
  <template #bottom>
    <div class="bottom">
      <div class="coupon">
        <van-tag plain type="danger">{{prod.couponValue}}</van-tag>
      </div>
      <div class="saleNum">{{prod.saleNum | saleNum}}</div>
      <van-icon name="shopping-cart-o" :style="{color: 'red'}" />
    </div>
  </template>
    </van-card>
    </van-list>
  </div>
</template>

<script>
import { findBaoKuan } from '@/api/home'

export default {
  name: 'Home',
  data () {
    return {
      images: [],
      list: [], // 商品数据数组
      loading: false, // 列表中是否在加载当前页面数据
      finished: false, // 列表中是否数据加载完毕
      nextIndex: 0
    }
  },
  created () {
    // 轮播图
    this.$http.get('/api/tab/1?start=0', {
      headers: {
        'x-platform': 'pc'
      }
    })
      .then(data => {
        // console.log('轮播图', data)
        this.images = data.banners
      })
      .catch()
  },
  methods: {
    findProducts (star = 0) {
      // eslint-disable-next-line no-undef
      return findBaoKuan(star)
        .then(data => {
          console.log(this.list)
          this.list = [
            ...this.list,
            ...data.list
          ]
          this.nextIndex = data.nextIndex
          this.finished = data.isEnd
        })
        .catch(err => {
          console.log('异常', err)
        })
    }
    // onload () {
    //   console.log('jiazai...')
    //   console.log(this.nextIndex)
    //   this.findProducts(this.nextIndex).then(() => {
    //     this.loading = false
    //   })
    // },
    // jumpToDetail (id) {
    //   this.$router.push('/detail?id=' + id)
    // }
  }
}
</script>

<style lang="scss" scoped>

</style>
